<template>
  <el-dialog
    :visible.sync="showDialog"
    title="修改结算账户"
    class="modify-account"
  >
    <div class="account" v-loading="loading">
      <template v-if="mInfo">
        <div class="merchant-info">
          <div class="merchant-name">
            <div class="name">
              商户简称<span>{{ mInfo.weMerchantName }}</span>
            </div>
            <div class="status">
              商户类型
              <span
                :class="{
                  success: mInfo.status == 6,
                  error: mInfo.status == 3
                }"
                >{{
                  mInfo.organizationType | $value2label(enterpriseTypeList)
                }}</span
              >
            </div>
          </div>
          <div class="merchant-info-list">
            <div>
              当前结算账号：<span>{{ rowInfo.applymentJson.accountInfo.accountNumber }}</span>
            </div>
            <div>
              当前结算账号状态：
              <span v-if="mInfo.status == 1" class="conduct">审核中</span>
              <span v-if="mInfo.status == 2" class="error">修改失败</span>
              <span v-if="mInfo.status == 3" class="success">修改成功</span>
            </div>
          </div>
        </div>
        <div class="account-info">
          <el-form
            ref="formRef"
            label-position="left"
            label-width="90px"
            :model="mInfo"
            :disabled="mInfo.status == 1"
          >
            <el-form-item label="账户类型" prop="accountType" verify>
              <el-radio
                v-model="mInfo.accountType"
                label="ACCOUNT_TYPE_BUSINESS"
                v-if="['1708', '2', '3', '4'].includes(mInfo.organizationType)"
                >对公账户</el-radio
              >
              <el-radio
                v-model="mInfo.accountType"
                label="ACCOUNT_TYPE_PRIVATE"
                v-if="['2500', '4', '2401'].includes(mInfo.organizationType)"
                >对私账户</el-radio
              >
            </el-form-item>
            <el-form-item label="开户名称" prop="accountName">
              <el-input
                v-model="mInfo.accountName"
                placeholder="请输入开户名称"
                disabled
              />
              <form-item-tip
                >1、选择经营者个人银行卡时，开户名称必须与身份证姓名一致</form-item-tip
              >
              <form-item-tip
                >2、选择对公账户时，开户名称必须与营业执照上的“商户名称”一致</form-item-tip
              >
            </el-form-item>
            <el-form-item label="开户银行" prop="accountBank" verify>
              <KiSelect
                v-model="mInfo.accountBank"
                :options="DICT.account_bank"
                :disabled="mInfo.status == 1"
              />
              <form-item-tip
                >城市商业银行、农村商业银行、信用合作联社及其他银行，请选择“其他银行”</form-item-tip
              >
            </el-form-item>
            <el-form-item label="开户支行" prop="bankAreaCode" verify>
              <el-row>
                <el-col :span="8">
                  <RegionSelect
                    v-model="mInfo.bankAreaCode"
                    :level="3"
                    :disabled="mInfo.status == 1"
                  />
                </el-col>
                <el-col :span="15" :offset="1">
                  <el-select
                    v-model="mInfo.bankBranchId"
                    filterable
                    remote
                    clearable
                    placeholder="请输入支行名称搜索"
                    :remote-method="getBank"
                    :loading="bankLoading"
                  >
                    <el-option
                      v-for="item in bankList"
                      :key="item.bankBranchId"
                      :label="item.bankName"
                      :value="item.bankBranchId"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item
              label="银行账号"
              prop="accountNumber"
              :verify="{ type: 'number|special', maxLength: 30 }"
            >
              <el-input
                v-model="mInfo.accountNumber"
                placeholder="请填写结算银行账号"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <div v-if="!loading && mInfo == null" class="empty">
        数据查询失败
      </div>
    </div>
    <template slot="footer" v-if="mInfo && mInfo.status != 1">
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="submit" :loading="btnLoading"
        >提交</el-button
      >
    </template>
  </el-dialog>
</template>
<script>
import TypeSelect from './TypeSelect'
import RegionSelect from 'region-select'
import DICT from '../dict'
export default {
  name: 'ModifyAccount',
  components: {
    RegionSelect
  },
  data () {
    return {
      DICT,
      showDialog: false,
      loading: false,
      enterpriseTypeList: TypeSelect.enterpriseTypeList,
      mInfo: null,
      bankLoading: false,
      btnLoading: false,
      bankList: [],
      rowInfo: null
    }
  },
  methods: {
    show (row) {
      this.showDialog = true
      this.rowInfo = row
      this.getmInfo(row)
    },
    submit () {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          if(this.mInfo.bankBranchId) {
            this.mInfo.bankName = this.bankList.find(item => {
              return item.bankBranchId === this.mInfo.bankBranchId
            })?.bankName
          }
          this.btnLoading = true
          this.$POST('/sot-admin-api/merchant/applyment/modifySettlement', {
            ...this.mInfo,
            id: this.rowInfo.id
          })
            .then(res => {
              this.$swal.success('提交成功')
              this.$parent.getList()
              this.getmInfo(this.rowInfo)
            })
            .finally(_ => {
              this.btnLoading = false
            })
        }
      })
    },
    getmInfo (row) {
      this.loading = true
      this.mInfo = null
      this.$POST('/sot-admin-api/merchant/applyment/querySettlement', { id: row.id })
        .then(({data}) => {
          if (data) {
            this.mInfo = data
            // 默认写入的支行信息
            if (data.bankName && data.bankBranchId) {
              this.bankList = [
                { bankName: data.bankName, bankBranchId: data.bankBranchId }
              ]
            }
          }
        })
        .finally(_ => {
          this.loading = false
        })
    },
    getBank (name) {
      this.bankLoading = true
      this.$POST('/sot-admin-api/merchant/applyment/queryAccountInstNameList', {
        idStr: this.mInfo.bankBranchId,
        name
      })
        .then(res => {
          if (res) {
            this.bankList = res.data
          }
        })
        .finally(_ => {
          this.bankLoading = false
        })
    },
    selectType (item) {
      this.$emit('confim', item.dataValue)
      this.showDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.account {
  min-height: 200px;
  .empty {
    text-align: center;
    line-height: 200px;
    font-size: 16px;
  }
  .merchant-info {
    padding: 10px 20px;
    margin-bottom: 20px;
    background-color: #f6f6f6;
    .merchant-name {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      span {
        font-size: 16px;
        font-weight: 600;
        margin-left: 10px;
      }
    }
    .merchant-info-list {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      span {
        color: #666;
        font-weight: bold;
        &.success {
          color: #13ce66;
        }
        &.conduct {
          color: #1890ff;
        }
        &.error {
          color: #ff4949;
        }
      }
    }
  }
  .account-info {
    border-top: 1px solid #f6f6f6;
  }
}
</style>
<style lang="scss">
.modify-account {
  margin: 25px auto !important;
  .el-dialog {
    margin: 0 auto !important;
    .el-form--label-top .el-form-item__label {
      padding-bottom: 0;
    }
  }
  .el-dialog__body {
    padding: 10px 20px 20px;
  }
  .el-cascader,
  .el-select {
    width: 100%;
  }
}
</style>
